<template>
  <DefaultLayout>
    <div class="space-y-8">
      <h1 class="text-4xl font-bold">视频教程</h1>
      
      <!-- 视频列表 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="video in videos" :key="video.id" class="card">
          <div class="aspect-video bg-gray-200 rounded-lg mb-4">
            <img :src="video.thumbnail" :alt="video.title" class="w-full h-full object-cover rounded-lg" />
          </div>
          <h2 class="text-xl font-semibold mb-2">{{ video.title }}</h2>
          <p class="text-gray-600 mb-4">{{ video.description }}</p>
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">{{ video.duration }}</span>
            <a :href="video.url" target="_blank" class="text-primary hover:underline">
              观看视频 →
            </a>
          </div>
        </div>
      </div>
    </div>
  </DefaultLayout>
</template>

<script setup lang="ts">
import DefaultLayout from '../layouts/DefaultLayout.vue'

const videos = [
  {
    id: 1,
    title: 'Cursor 安装与配置',
    description: '详细介绍如何安装和配置 Cursor 编辑器',
    duration: '15:30',
    thumbnail: '/images/video-1.jpg',
    url: '#'
  },
  {
    id: 2,
    title: 'AI 辅助编程实战',
    description: '通过实际案例学习如何使用 AI 功能提高编程效率',
    duration: '25:45',
    thumbnail: '/images/video-2.jpg',
    url: '#'
  },
  {
    id: 3,
    title: '快捷键与效率技巧',
    description: '掌握 Cursor 的快捷键和效率提升技巧',
    duration: '18:20',
    thumbnail: '/images/video-3.jpg',
    url: '#'
  }
]
</script> 